html, body {
    width: 100% !important;
    height: 100% !important;
}
body {
    padding: 0 !important; //ng drawer 6px
    background: var(--module-body-color);
    color: var(--font-primary-color);
}
a {
    color: var(--font-primary-color);
}
a:focus, a:hover {
    color: var(--font-hover-color);
}

label.disabled {
    border-color: #f0f0f0;
    background: #f0f0f0;
    color: #888
}

label.disabled:hover {
    border-color: #f0f0f0 !important;
    background: #f0f0f0 !important;
    color: #888 !important;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: var(--font-primary-color);
    overflow: hidden;
}

.label {
    padding: 2px 5px;
    margin-bottom: 0px;
}

.label-lg {
    padding: 6px 8px !important;
    border-radius: 5px;
}

.badge {
    padding: 5px 8px;
    background-color: var(--badge-default-color);
}

.custom-list {
    display: grid;
    /* autoprefixer: off */
    grid-auto-flow: row;
    .list-title {
        display: grid;
        grid-gap: 10px;
        align-items: center;
        justify-items: center;
        padding: 10px;
        font-size: 15px;
    }
    .list-item {
        min-height: 50px;
        display: grid;
        grid-gap: 10px;
        align-items: center;
        padding: 10px;
    }
    .list-item:hover {
        box-shadow: 0 0 8px 2px var(--list-item-shadow-color);
    }
}

.custom-time-line {
    display: grid;
    /* autoprefixer: off */
    grid-auto-flow: row;
    grid-gap: 15px;
    .time-line-item {
        position: relative;
        display: grid;
        grid-row-gap: 5px;
        grid-column-gap: 15px;
        grid-template-columns: 80px 1fr;
        grid-template-areas: "a b" "a c" "a d";
        .time-line-icon {
            grid-area: a;
            justify-self: end;
            .timeline-badge {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: grid;
                align-items: center;
                justify-items: center;
                color: #ffffff;
                font-size: 18px;
            }
        }
        .time {
            grid-area: b;
        }
        .person {
            grid-area: c;
            color: var(--font-primary-color);
        }
        .content {
            grid-area: d;
            padding: 15px;
            border-left: 2px solid skyblue;
            background-color: var(--panel-primary-color);
            .task {

            }
            .description {
                margin-top: 10px;
            }
            .attachment {
                margin-top: 10px;
                display: grid;
                /* autoprefixer: off */
                grid-template-columns: auto auto 1fr;
                grid-gap: 20px;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
            .factor {
                margin-top: 10px;
                display: grid;
                grid-template-columns: 150px 1fr;
                align-items: center;
            }
        }
    }
}

/** text-fixed-width overflow start **/
.text-fixed-width-10 {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
    width: 10em; /*不允许出现半汉字截断*/
    font-size: 1em;
    display: block;
}

.text-fixed-width {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
    display: block;
}

.text-fixed-two-row{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text-fixed-three-row{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/** text-fixed-width overflow end **/

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
